{% extends "base.html" %}

<!-- ======================================================================= -->
<!-- page specific head (scripts, CSS, etc.) ================================--> 
<!-- ======================================================================= -->
{% block BaseHead %}

<!-- ======================================================================= -->
<!-- page specific names ====================================================-->
<!-- ======================================================================= -->
<script type="text/javascript">
    GW.page = {% if page %} {{page}} {% else %} []{% endif %};                  // set page
    GW.pages = [];                                                              // page cache for the map
    GW.mapFeatureToFeature = [];                                                // list of map meatures indexed by the point, line, or shape
    // fixme: when adding a featurepage or featuretag should show the resulting features however these should NOT be editable since they belong to another page!
    GW.dirty = false;                                                           // true if page or features have been edited
    //GW.markers = {% if markers %} {{markers}} {% else %} null{% endif %};       // set markers
    //GW.colors = {% if colors %} {{colors}} {% else %} null{% endif %};          // set colors
</script>

<!-- ======================================================================= -->
<!-- page JS ================================================================-->
<!-- ======================================================================= -->
<script type="text/javascript" src="/static/js/edit.js" > </script>

<!-- ======================================================================= -->
<!-- page specific styles ===================================================-->
<!-- ======================================================================= -->
<style type="text/css">
    form.dialog1{
        font-size: 95%;
    }
    form.dialog1 label{
        float: left;
        width: 5em;
        padding-right: 0.5em;
        margin-bottom: 0.5em;
    }
    form.dialog1 label.inline{
        float: left;
        width: 5em;
        padding-right: 0.5em;
        margin-bottom: 0.5em;
    }
    form.dialog1 input.ro {
        width: 40em;
        background-color: #E8E8E8;
        margin-bottom: 0.5em;
    }
    form.dialog1 textarea.ro {
        width: 40em;
        height: 6em;
        background-color: #E8E8E8;
    }
    form.dialog1 textarea.ed {
        width: 45em;
        height: 6em;
        background-color: #ffffff;
    }
</style>

<!-- ======================================================================= -->
<!-- page specific head (scripts, CSS, etc. =================================--> 
<!-- ======================================================================= -->
{% endblock %}

<!-- ======================================================================= -->
<!-- Page body ============================================================= -->
<!-- ======================================================================= -->
{% block BaseBody %}
<div id="idLeft" style="float:left; overflow: auto; height: 100%;">
    <form method="post" action="#" id="idContentForm" > 
        <textarea id="idContent" name="editor" ></textarea>
    </form>
</div>
<div id="idMap" style="float: left; width: 49%; height: 100px;" >
</div>
<!-- ======================================================================= -->
<!-- Feature Page Display Panel ============================================ -->
<!-- ======================================================================= -->
<div id="idFeaturePageDisplayPanel" style="visibility:hidden" >
    <div id="idFeaturePageDisplayPanelHD" class="hd">
        <a class="pdpMenu" href="#" onClick="GW.displayFeaturePage.showContent(); return false;">Content</a>&nbsp;&nbsp;
        <a class="pdpMenu" href="#" onClick="GW.displayFeaturePage.showProperties(); return false;">Properties</a>&nbsp;&nbsp;
        <a class="pdpMenu" href="#" onClick="GW.displayFeaturePage.page(); return false;">Page</a>&nbsp;&nbsp;
        <a class="pdpMenu" href="#" onClick="GW.displayFeaturePage.edit(); return false;">Edit</a>&nbsp;&nbsp;
        <a class="pdpMenu" href="#" onClick="GW.displayFeaturePage.hide(); return false;">Exit</a>&nbsp;&nbsp;
    </div>
    <div id="idFeaturePageDisplayPanelBD" class="bd" style="overflow: auto;" ><!-- content goes here --> </div>
</div>
<!-- ======================================================================= -->
<!-- Add Feature Panel ===================================================== -->
<!-- ======================================================================= -->
<div id="idAddFeatureDialog" style="visibility:hidden" >
    <div class="hd">New Feature</div>
    <div id="idAddFeatureBD" class="bd" style="overflow: auto; width: 8em;">
        <img id='idNewMarkerBTN' src="/static/img/placemark.png" alt="Marker" style="border-style: none; verticle-align: middle;" onclick="GW.marker.newMarker()" />&nbsp;
        <img id='idNewLineBTN' src="/static/img/line.png" alt="Line" style="border-style: none; verticle-align: middle;"  onclick="GW.line.newLine()" />&nbsp;
        <img id='idNewShapeBTN' src="/static/img/shape.png" alt="Shape" style="border-style: none; verticle-align: middle;"  onclick="GW.shape.newShape()" />
    </div>
</div>
<!-- ======================================================================= -->
<!-- Line Feature Properties Panel ========================================= -->
<!-- ======================================================================= -->
<div id="idLineDialog" style="visibility:hidden" >
    <div class="hd">New Marker</div>
    <div id="idLineBD" class="bd" style="overflow: auto; width: 20em;">
        <b>Select color or exit.</b><br />
        {% for c in colors %}<img src="/static/img/polycolor.png" alt="{{c.name}}" 
                                id="idColorTab_{{c.name}}"
                                style="border-style: none; margin-right:0.25em; height:20px; width:20px; background-color:{{c.color}}; " 
                                onclick="GW.line.editSetColor( '{{c.color}}' )" />&nbsp;
        {% endfor %}
    </div>
</div>
<!-- ======================================================================= -->
<!-- Line Feature Properties Panel ========================================= -->
<!-- ======================================================================= -->
<div id="idShapeDialog" style="visibility:hidden" >
    <div class="hd">New Marker</div>
    <div id="idShapeBD" class="bd" style="overflow: auto; width: 20em;">
        <b>Select color or exit.</b><br />
        {% for c in colors %}<img src="/static/img/polycolor.png" alt="{{c.name}}" 
                                id="idColorTab_{{c.name}}"
                                style="border-style: none; margin-right:0.25em; height:20px; width:20px; background-color:{{c.color}}; " 
                                onclick="GW.shape.editSetColor( '{{c.color}}' )" />&nbsp;
        {% endfor %}
    </div>
</div>
<!-- ======================================================================= -->
<!-- Marker Feature Properties Panel ======================================= -->
<!-- ======================================================================= -->
<div id="idMarkerDialog" style="visibility:hidden" >
    <div class="hd">New Marker</div>
    <div id="idMarkerBD" class="bd" style="overflow: auto; width: 20em;">
        <b>Select marker icon or exit.</b><br />
        {% for t in markers %}<img src="/gw/json/marker/{{t.name}}" alt="{{t.name}}" 
                                   style="border-style: none; verticle-align: middle;" 
                                   onclick="GW.marker.editSetIcon( '{{t.name}}' )" />&nbsp;
        {% endfor %}
    </div>
</div>
<!-- ======================================================================= -->
<!-- Page properties panel ================================================= -->
<!-- ======================================================================= -->
<div id="idPagePropertiesDialog" style="visibility:hidden;" >
    <div class="hd">Page Properties </div>
    <div class="bd" style="overflow: auto">
        <form id="idPPForm" name="ppForm" class="dialog1" method="post" action="#" >
            <label for='pageTitle'>Title:</label>
            <input class='ro' name='pageTitle' id='idTitle' value="page.titleStr goes here" readonly='readonly' /><br />
            <label for='pageAuthor'>Author:</label>
            <input class='ro' name='pageAuthor' id='idAuthor' value="page.author goes here" readonly='readonly' /><br />
            <label for='pageDate'>Date:</label>
            <input class='ro' name='pageDate' id='idDate' value='page.date' readonly='readonly' /><br />
            <label for='pageRevision'>Revision:</label>
            <input class='ro' name='pageRevision' id='idRevision' style='width: 3em;' value='page.revision goes here' readonly='readonly' /><br />
            <label for='pageLocked'>Locked:</label>
            <input class='ro' name='pageLocked' id='idLocked' value='page.locked' readonly='readonly' style='width:3em;' /><br />
            <br />
            <span style="font-size:larger" >Enter as <b>";"</b> seperated list.</span><br />
            <br />
            Tags for this page:<br />
            <textarea class='ed' name='pageTags' id='idTags' value='page.tags goes here' /> </textarea><br />
            <br />
            Pages who's features should be displayed on this page:<br />
            <textarea class='ed' name='pageFeaturePages' id='idFeaturePages' value='page.tags goes here' /> </textarea><br />
            <br />
            Page tags of pages who's features should be displayed on this page:<br />
            <textarea class='ed' name='pageFeatureTags' id='idFeatureTags' value='page.tags goes here' /> </textarea><br />
        </form>
    </div>
</div>

{% endblock %}



